<template>
    <view class="main">
        <view class="item dispaly-just-between">
            <view class="left">登录手机号</view>
            <view class="right dispaly-center">
                <input type="number" placeholder="请输入手机号" v-model="formData.tel" maxlength="11">
                <!-- <view class="text">13500003234</view> -->
                <tn-icon name="right" color="#b7b7b7" size="40" />
            </view>
        </view>
        <view class="item dispaly-just-between">
            <view class="left">姓名</view>
            <view class="right dispaly-center">
                <input type="text" placeholder="请输入姓名" v-model="formData.nickname">
                <!-- <view class="text">半夏</view> -->
                <tn-icon name="right" color="#b7b7b7" size="40" />
            </view>
        </view>
        <view class="item dispaly-just-between">
            <view class="left">头像</view>
            <view class="right dispaly-center" @click="showPopup = true">
                <view class="avatar">
                    <image mode="aspectFill" :src="formData.avatar ? formData.avatar : '/static/test.jpg'" />
                </view>
                <tn-icon name="right" color="#b7b7b7" size="40" />
            </view>
        </view>

        <!-- 上传头像选择类型 -->
        <TnPopup v-model="showPopup" close-btn open-direction="bottom">
            <view class="pop-main">
                <view class="title">头像</view>
                <view class="type-list">
                    <view :class="{ 'active': index == current }" class="type-item dispaly-align-center"
                        v-for="(item, index) in uploadType" :key="index" @click="upload(item, index)">{{ item.name }}
                    </view>
                </view>
            </view>
        </TnPopup>

        <view class="btn-box1 w-100 dispaly-align-center">
            <view class="btn1 dispaly-align-center" @click="submit">提交修改</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { reactive, ref } from 'vue'
import { uploadImage } from '@/utils/util'
import { updateInfo } from '@/api/home/home'
import type { RequestUpadateUserInfo } from '@/types/requstParm'
import { getMyInfo } from '@/api/home/home'
import type { MyInfoType } from '@/types/responseData'
import { onLoad } from '@dcloudio/uni-app'

// 获取我的信息
let myInfo = ref<MyInfoType | any>()
const getMyInfoData = async () => {
    const res = await getMyInfo({ user_id: 2 })
    if (res.code == 0) {
        myInfo.value = res.data
        const { mobile, nickname, avatar, id } = myInfo.value
        formData.avatar = avatar
        formData.nickname = nickname
        formData.tel = mobile
        formData.user_id = id
    }
}

onLoad(() => {
    getMyInfoData()
})

const showPopup = ref<boolean>(false)

const formData = reactive<RequestUpadateUserInfo>({
    tel: '',
    avatar: '',
    nickname: '',
    user_id: 2
})

// 上传图片类型
interface TUploadType {
    type: string,
    name: string
}
const uploadType = ref<Array<TUploadType>>([
    { type: 'camera', name: '拍照' },
    { type: 'album', name: '相册' }
])

// 上传头像
const current = ref<number>(0)
const upload = async (item: TUploadType, index: number) => {
    current.value = index
    const res = await uploadImage(1, item.type) as string[]
    formData.avatar = res[0]
    if (res.length) {
        uni.showToast({
            title: '上传成功',
            icon: 'none'
        })
        showPopup.value = false
    }
}

// 提交信息
const submit = async () => {
    const res = await updateInfo(formData)
    if (res.code == 0) {
        uni.showToast({
            title: res.msg as string,
            icon: 'none'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 1000)
    }
}
</script>

<style>
page {
    background: #f4f4f6;
}
</style>

<style lang="scss" scoped>
.main {
    padding: 23rpx 30rpx;

    .item:last-child {
        margin-bottom: 0;
    }

    .item {
        padding: 37rpx 40rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-bottom: 20rpx;

        .left {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #000000;
        }

        .right {
            input {
                text-align: right;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #7E7E7E;
            }

            .avatar {
                image {
                    width: 69rpx;
                    height: 69rpx;
                    border-radius: 50%;
                }
            }
        }
    }
}

.active {
    background: #FFFFFF;
    border-radius: 15rpx;
    border: 2rpx solid #008298;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #008298;
}

.pop-main {
    .title {
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 125rpx;
        margin-top: 34rpx;
    }

    .type-list {
        display: flex;
        flex-direction: column;
        align-items: center;

        .type-item:last-child {
            margin-bottom: 68rpx;
        }

        .type-item {
            background: #F5F5F5;
            border-radius: 15rpx;
            width: 608rpx;
            height: 80rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            margin-bottom: 27rpx;
        }
    }
}

.btn-box1 {
    position: fixed;
    bottom: 97rpx;
    left: 0;
    right: 0;

    .btn1 {
        width: 523rpx;
        height: 84rpx;
        background: #008298;
        border-radius: 12rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
    }
}
</style>